import 'package:flutter/material.dart';

class ZheDieBar extends StatefulWidget {
  const ZheDieBar({Key key}) : super(key: key);

  @override
  _ZheDieBarState createState() => _ZheDieBarState();
}

class _ZheDieBarState extends State<ZheDieBar>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  double _headerOpacity = 0.0;

  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    _scrollController.addListener(() {
      double offset = _scrollController.offset;
      if (offset <= 160) {
        _headerOpacity = offset / 160;
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        body: buildBody(),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              // 展开高度
              expandedHeight: 300,
              //标题停留
              pinned: true,
              // 折叠部分
              flexibleSpace: FlexibleSpaceBar(
                title: Opacity(opacity: _headerOpacity, child: Text('标题')),
                background: Container(
                  width: double.infinity,
                  height: 300,
                  color: Colors.pink,
                  child: Wrap(
                    spacing: 10,
                    runSpacing: 10,
                    children: List.generate(
                        6,
                        (index) => Container(
                              color: Colors.orange,
                              width: MediaQuery.of(context).size.width / 3 - 30,
                              height: 70,
                              child: Text('nihao'),
                            )),
                  ),
                ),
              ),
            )
          ];
        },
      ),
    );
  }

  buildBody() {
    return Container(height: 2000, color: Colors.green);
  }
}
